<template>
  <view class="mini-container">
    <view class="mini-container-header">
      <wd-navbar title="我的合同" left-arrow @click-left="handleClickLeft"></wd-navbar>
      <view class="mini-header">
        <view class="mini-header-num">
          <view class="flex-column">
            <view class="font28 mb16">已付金额</view>
            <view class="font44">￥{{ paidAmount }}</view>
          </view>
          <view class="line"></view>
          <view class="flex-column">
            <view class="font28 mb16">未付金额</view>
            <view class="font44">￥{{ unPaidAmount }}</view>
          </view>
        </view>
        <view class="mini-header-box"></view>
      </view>
    </view>
    <view class="mini-content">
      <Tabs
          :list="list"
          v-model:current="current"
          @change="onchange"
      />
      <ContractList v-if="current===0"/>
      <ChangeInformation v-if="current===1"/>
      <div v-show="current===2">3</div>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import Tabs from "@/components/tabs/index.vue"
import ContractList from './components/contractCard/index.vue'
import ChangeInformation from "./components/changeInformation/index.vue"
import {amount} from "@/api/contract";

const current = ref(0)
const paidAmount = ref()
const unPaidAmount = ref()
const list = ref(["我的合同", "变更单"])
// const list = ref(["我的合同", "变更单", "方案图纸"])
const handleClickLeft = () => {
  uni.navigateBack()
}
const onchange = (v) => {
  console.log(v);
}
const getAmount = async () => {
  const {data} = await amount()
  paidAmount.value = data.paidAmount
  unPaidAmount.value = data.unPaidAmount
}
getAmount()
</script>
<style lang="scss">
.desc{
  width: 452rpx!important;
}
</style>
<style scoped lang="scss">
@import "index";

</style>